<template>
  <view class="container">
    <scroll-view :scroll-left="scrollLeft" class="tab-view" scroll-with-animation scroll-x>
      <view :class="[currentTab==index ? 'active' : '']" :data-current="index" :key="index"
            @tap.stop="swichNav"
            class="tab-bar-item" v-for="(item,index) in tabbar">
        <text class="tab-bar-title">{{item}}</text>
      </view>
    </scroll-view>
    <swiper :current="currentTab" :style="{height:winHeight+'px'}" @change="switchTab" class="tab-content"
            duration="300">
      <swiper-item :key="index" v-for="(item,index) in tabbar">
        <scroll-view class="scoll-y" scroll-y>
          <view class="list-view">
            <view :hover-stay-time="150" @tap="toDetail()" class="list-cell list-item" hover-class="hover">
              <view>123</view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    name: "navbar-top",
    data() {
      return {
        tabbar: ["热门", "娱乐", "体育", "国内", "财经", "科技"],
        winHeight: "", //窗口高度
        currentTab: 0, //预设当前项的值
        scrollLeft: 1 //tab标题的滚动条位置
      }
    },
    onLoad: function () {
      let that = this;
      //  高度自适应
      uni.getSystemInfo({
        success: function (res) {
          let calc = res.windowHeight;
          that.winHeight = calc;
        }
      });
    },
    methods: {
      // 滚动切换标签样式
      switchTab(e) {
        let that = this;
        this.currentTab = e.detail.current;
        this.checkCor();
      },
      // 点击标题切换当前页时改变样式
      swichNav(e) {
        let cur = e.currentTarget.dataset.current;
        if (this.currentTab == cur) {
          return false;
        } else {
          this.currentTab = cur
        }
      },
      //判断当前滚动超过一屏时，设置tab标题滚动条。
      checkCor() {
        if (this.currentTab > 3) {
          //这里距离按实际计算
          this.scrollLeft = 300
        } else {
          this.scrollLeft = 0
        }
      },
      toDetail(e) {
        this.tui.toast('跳转')
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "navbar-top.css";
</style>
